<style scoped lang="less">
.typeItemContain {
  border: 1px solid #e8eaec;
  border-radius: 4px;
  background: #fff;
  height: 150px;
}
.typeItemContain:hover {
  background: rgba(220, 222, 204, 0.28);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  .allKPI {
    border-top: 1px solid #c5c8ce !important;
  }
}
.demo-badge-alone {
  background: #3a3636 !important;
}
.badge2 {
  background: #a79f9f !important;
}

/* 总的统计 */

.rowAll {
  margin-bottom: 10px;
  margin-left: 0px;
  .colLeft {
    padding-left: 0;
    padding-right: 0;
  }
  .colRight {
    float: right;
  }
}
.itemAllTitle {
  font-size: 14px;
  color: grey;
  padding: 10px 0 2px 10px;
}
.itemAllStatistic {
  text-align: center;
  .number {
    font-size: 35px;
  }
}
.statisticContain {
  display: flex;
  text-align: center;
  padding: 5px 0;
  .itemContain {
    flex: 1;
    .itemText {
      color: grey;
      font-size: 14px;
      // text-align: left;
      // padding-left: 10px
    }
  }
}
.allKPI {
  border-top: 1px solid #e9eaec;
  color: grey;
  padding: 5px 0px;
  font-size: 14px;
  text-align: center;
}
.typeItemSelect {
  box-shadow: 0 1px 6px rgba(198, 217, 236, 1);
  background: rgba(220, 222, 204, 0.28) !important;
  .allKPI {
    border-top: 1px solid #c5c8ce !important;
  }
}
// .spacePadding {
//   padding: 0 5px 0 0;
// }
.carbon_rigt{ padding-right:10px }

</style>
<template>
  <div>
    <Col span="8" class="carbon_rigt">
      <Spin size="large" fix v-if="spinShow"></Spin>
      <div class="spacePadding">
        <div class="typeItemContain" @click="typeItemClick(type)" :id="type">
          <div class="itemAllTitle"> {{name}} ({{unitData[name]}})</div>
          <div class="itemAllStatistic"><span class="number">{{values.carbon?numberShow(values.carbon): '0.00'}}</span> </div>
          <div class="statisticContain">
            <div class="itemContain">
              <div class="itemText"> 周同比
                <Icon type="md-arrow-dropup" color="green" size="18" /> <span>19%</span></div>
            </div>
            <div class="itemContain">
              <div class="itemText"> 日环比
                <Icon type="md-arrow-dropdown" color="red" size="18" /> <span>22%</span></div>
            </div>
          </div>
          <div class="allKPI"> KPI(年): 35%</div>
        </div>
      </div>
    </Col>
  </div>
</template>
<script>
export default {
  props: {
    param: Object,
    name: String,
    type: String
  },
  data: function () {
    return {
      // ['水', '电', '燃气', '蒸汽', '冷量', '压缩空气']
      unitData: {
        '水': 't',
        '电': 'kwh',
        '燃气': 'Nm³',
        '蒸汽': 't',
        '冷量': 'kCal',
        '压缩空气': 'm³',
        '汇总碳排': 'kg',
        '单车碳排': 'kg/辆',
        '综合产量': '辆'
      },
      values: {},
      spinShow: false
    }
  },
  mounted: function () {
    // console.log('mounted----', 'loadData()', '------name:', this.name)
    // watch的深度监测会触发加载初始数据
    // this.loadData()
    this.defaultSelect()
  },
  destroyed: function () {
    // console.log('destroyed')
  },
  watch: {
    param: {
      // 不能设置immediate(立即运行)，这会立即触发
      // immediate: true,
      deep: true,
      handler(curVal, oldVal) {
        console.log('watch----', 'loadData()', '------name:', this.name)
        if (JSON.stringify(curVal) === JSON.stringify(oldVal)) {
          console.log('curVal === oldVal--true')
        } else {
          console.log('curVal === oldVal--false')
        }
        this.loadData()
      }
    }
  },
  methods: {
    loadData: function () {
      // 加载数据
      if (this.param.dateStr instanceof Date) {
        this.param.dateStr = this.param.dateStr.format('yyyy-MM-dd')
      }
      this.param.enName = this.name
      this.spinShow = true
      window.myapi.do_post('$carbon/carbon', this.param).then(resp => {
        if (resp.status === 200 && resp.data.status === 200) {
          this.values = resp.data.data
        } else {
          this.$Notice.warning({
            title: '提示',
            desc: resp.data.msg
          })
        }
      }).finally(() => {
        this.spinShow = false
      })
    },
    typeItemClick: function (id) {
      // key是当前的数据的key
      this.$emit('typeClick', this.name)
      this.singleItemClick(id)
    },
    // 选中样式
    singleItemClick: function (id) {
      let existenceObj = document.querySelector('.typeItemSelect')
      if (existenceObj) {
        existenceObj.classList.remove('typeItemSelect')
      }
      document.querySelector('#' + id).classList.add('typeItemSelect')
    },
    // 大数字 千分位显示
    numberShow: function (number) {
      return this.$utils.numberShow(number)
    },
    // 默认选中
    defaultSelect: function () {
      let obj = document.querySelector('#allId0')
      if (obj && obj.classList.value.indexOf('typeItemSelect') > -1) {
        return
      } else {
        obj.classList.add('typeItemSelect')
      }
    }
  }
}

</script>
